<template>
  <div class="app-container">
  <el-table v-loading="loading" :data="page.records" highlight-current-row @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="商品编码" align="center" prop="csaSpuCode" />
       <el-table-column label="商城SKU" align="center" prop="csaSkuCode" />
       <el-table-column label="商品名称"  width="195" align="center" prop="custGoodsName" />
       <el-table-column label="店铺" align="center" prop="storeName" />
       <el-table-column label="规格" align="center" prop="materialGuige" />
       <el-table-column label="供货价" align="center" prop="settlePrice" />
       <el-table-column label="商城" align="center" prop="customerName" />
       <el-table-column label="加价比例" align="center" prop="addPriceRate" />
       <el-table-column label="与营销委结算价" align="center" prop="custRelSalesPrice" />
     <!--  <el-table-column label="价差比例" align="center" prop="priceDiffRate" />
  -->
       <el-table-column label="京东售价" align="center" prop="jdSalesPrice" />
       <el-table-column label="里程价格" align="center" prop="custMileSalesPrice" />
       <el-table-column label="供应商" align="center" prop="supplierName" />
       <el-table-column label="单品/组合" align="center" prop="groupOrSpu" />
       <el-table-column label="京东链接"  width="195" align="center" prop="jdWebLink" />
       <el-table-column label="有效始" align="center" prop="applyDate" width="180">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.applyDate, '{y}-{m}-{d}') }}</span>
         </template>
       </el-table-column>
       <el-table-column label="有效至" align="center" prop="effectUntilDate" width="180">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.effectUntilDate, '{y}-{m}-{d}') }}</span>
         </template>
       </el-table-column>
       <el-table-column label="仓库" align="center" prop="warehouse" />
       <el-table-column label="产地" align="center" prop="originLocation" />
       <el-table-column label="品牌名称" align="center" prop="brandName" />
       <el-table-column label="库存" align="center" prop="inventory" />
       <el-table-column label="吊牌价" align="center" prop="suggestRetailerPrice" />
       <el-table-column label="销量" align="center" prop="estCurrentSaleQty" />
       <el-table-column label="品牌" align="center" prop="brandName" />
       <el-table-column label="货号" align="center" prop="custGoodsNo" />
       <el-table-column label="常规品/活动品" align="center" prop="regularOrDisCt" />
       <el-table-column label="自营" align="center" prop="selfBusinessYn" />
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="创建时间" align="center" prop="createTime" width="180">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
         <template slot-scope="scope">
         </template>
       </el-table-column>
     </el-table>
  </div>
</template>

<script>
import MaterialBuyPriceApi from '@/api/accounting/MaterialBuyPriceApi'


const defaultSpu = {
  spuName: null,
  sn: null,
  title: null,
  brandId: null,
  brandName: null,
  categoryId: null,
  categoryName: null,
  price: null,
  wholesalePrice: null,
  stock: null,
  warningStock: null,
  stockStatus: null,
  salesStatus: null,
  deliveryType: null,
  specParamTemplateId: null,
  freightTemplateId: null,
  specs: null,
  params: null,
  image: null,
  images: null,
  model: null,
  introduction: null,
  detailHtml: null,
  detailMobileHtml: null,
  saleService: null,
  saleQty: null,
  commentQty: null,
  isMarketable: null,
  isEnableSpec: null,
  status: '0'
}
export default {
  name: 'SpuList',
  components: {
    SpuInfo,
    SpuAttr
  },
  page: {
    records: []
  },
  data() {
    return {
      isEdit: false,
      activeStep: 0,
      spu: Object.assign({}, defaultSpu),
      showStatus: [true, false, false, false]
    }
  },
  created() {
    const id = this.$route.params.id
    if (id) {
      MaterialBuyPriceApi.getByMapId(id).then(response => {
        this.page.records = response.data.records
      })
    }
  },
  methods: {
    handleHideStepAll() {
      for (let i = 0; i < this.showStatus.length; i++) {
        this.showStatus[i] = false
      }
    },
    handlePrevStep() {
      if (this.activeStep > 0 && this.activeStep < this.showStatus.length) {
        this.activeStep--
        this.handleHideStepAll()
        this.showStatus[this.activeStep] = true
      }
    },
    handleNextStep() {
      if (this.activeStep < this.showStatus.length - 1) {
        this.activeStep++
        this.handleHideStepAll()
        this.showStatus[this.activeStep] = true
      }
    },
    handleFinishStep() {
      if (this.isEdit) {
        SpuApi.edit(this.spu).then(response => {
          this.$message.success('修改成功')
          this.$router.back() // 返回上一页
        })
      } else {
        SpuApi.add(this.spu).then(response => {
          this.$message.success('添加成功')
          // location.reload() // 刷新当前页面
          this.$router.back() // 返回上一页
        })
      }
    }
  }
}
</script>
<style>
.form-container {
  width: 825px;
  /*position: absolute;*/
  left: 0;
  right: 0;
  padding: 35px 35px 15px;
  margin: 20px auto;
}
</style>
